<template>
    <div class="daily">
        <header>
            <h2>今日上新</h2>
            <div class="user-action">
                <div class="search-bar">
                    <input type="text" v-model="keyword" class="search-input" placeholder="请输入搜索条件">
                </div>
                <cube-button :inline="true" @click="search()">搜索</cube-button>
            </div>
        </header>
        <div class="commend-header">
            <span @click="showDrawer">{{currentDate}}</span>
            <i class="cubeic-calendar calendar" @click="showDrawer"></i>
        </div>
        <div class="commend-list">
            <div class="commend-item" v-for="item in commendList" :key="item.id" @click="goTarget(item)">
                <div class="item-logo">
                    <img v-show="item.logo" :src="item.logo" alt="logo">
                    <div v-show="!item.logo" class="v-image">{{item.name.substr(0,1)}}</div>
                </div>
                <div class="item-desc">
                    <p>{{item.name}}</p>
                    <div>
                        <span>
                            {{item.key1}}{{item.key2 ? '|'+ item.key2: ''}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <cube-drawer
            ref="drawer"
            title="选择日期"
            :data="dataList"
            @select="selectHandler">
        </cube-drawer>
        <Tabbar/>
    </div>
</template>
<script>
import Tabbar from '@/components/Tabbar.vue'
import { Button, Drawer,Input } from 'cube-ui'

export default {
    components: {
        Tabbar
    },
    data() {
        return {
            dataList: [[]],
            currentDate: '',
            commendList: [],
            keyword:''
        }
    },
    methods: {
        showDrawer() {
            this.$refs.drawer.show()
        },
        selectHandler(selectedVal) {
            this.currentDate = selectedVal[0];
            this.getDateItem();
        },
        getDateItem() {
            this.$http.get(`/getDateItem`,{params: {date: this.currentDate}}).then((response) => {
                let data = [].concat(response.data);
                this.commendList = data.sort((a, b) => b.sort - a.sort);
            })
        },
        goTarget(item) {
            window.location.href = item.url;
        },
        search() {
            if(this.keyword === '') {
                this.getDateItem();
            }else {
                this.$http.get(`/getItemByKeyword`,{params: {keyword: this.keyword}}).then((response) => {
                    let data = [].concat(response.data);
                    this.commendList = data.sort((a, b) => b.sort - a.sort);
                })
            }
        }
    },
    mounted() {
        this.$http.get('/getRecentDateList').then((response) => {
            let data = response.data;
            this.dataList = [[]];
            data.forEach(element => {
                this.dataList[0].push({
                    text: element.date,
                    value: element.date
                })
            });

            this.currentDate = data[0].date;
            this.getDateItem();
        })
    }
}
</script>
<style scoped>
    .daily{
        padding:12px;
    }
    header{
        height: 15vh;
        background-color:white;
        padding: 20px 20px;
    }
    .cube-drawer{
        z-index: 100;
    }
    .calendar{
        font-size:20px;
        margin-left:5px;
        position: relative;
        top:1px;
    }
    h2{
        font-size: 20px;
        font-weight: bold;
        line-height: 30px;
        border-left:5px solid #00CAF2;
        padding-left:15px;
    }
    .commend-list{
        display: flex;
        flex-wrap: wrap;
        margin-top:12px;
        background-color: #fff;
        border-radius:5px;
    }
    .commend-item{
        width: 50%;
        padding: 10px 10px;
        display:flex;
    }
    .commend-item img{
        width:38px;
        height:38px;
    }
    .commend-item .v-image{
        width:38px;
        height:38px;
        border-radius: 5px;
        line-height: 38px;
        text-align: center;
        display:inline-block;
        background-color: #1976D2;
        color:white;
        font-size:20px;
        font-weight: bold;
    }
    .item-desc{
        margin-left:5px;
        width: calc(100% - 38px);
    }
    .item-desc p{
        font-size:14px;
        margin-top:2px;
        font-weight: bold;
    }
    .item-desc>div{
        position: relative;
        margin-top:10px;
    }
    .item-desc span{
        display: inline-block;
    }

    .user-action{
        margin-top:8px;
    }
    .search-bar{
        display:inline-block;
        width:150px;
    }
    .commend-header{
        margin-top:12px;
    }
    .commend-header img{
        width:20px;
        vertical-align: top;
    }
    .commend-header span{
        font-size:17px;
        font-weight: bold;
        margin-left:5px;
    }
    .daily .cube-btn{
        margin-left:10px;
        vertical-align: baseline;
    }
    .search-input{
        height:30px;
        border:1px solid #ddd;
        padding-left:5px;
    }
</style>
